<template>
  <div>
    <div class="right-title">
      <span>极创客管理</span>
    </div>
    <div class="right-content">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="院务委员" name="1">
          <el-table :data="allManagers[0]" stripe style="width: 100%">
            <el-table-column prop="geekerId" label="学号" width="100"></el-table-column>
            <el-table-column prop="geekerName" label="姓名" width="70"></el-table-column>
            <el-table-column prop="geekerDirection" label="方向" width="90"></el-table-column>
            <el-table-column prop="projectInfo" label="项目经历" width="270"></el-table-column>
            <el-table-column prop="geekerStation" label="职位" width="90"></el-table-column>
            <el-table-column prop="geekerPhone" label="电话" width="110"></el-table-column>
            <el-table-column>
              <el-button type="danger" plain @click="open1">删除</el-button>
              <el-button type="primary" plain @click="downloadResume">下载简历</el-button>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="极客" name="2">
          <el-table :data="allManagers[1]" stripe style="width: 100%">
            <el-table-column prop="geekerId" label="学号" width="100"></el-table-column>
            <el-table-column prop="geekerName" label="姓名" width="70"></el-table-column>
            <el-table-column prop="geekerDirection" label="方向" width="90"></el-table-column>
            <el-table-column prop="projectInfo" label="项目经历" width="270"></el-table-column>
            <el-table-column prop="geekerStation" label="职位" width="90"></el-table-column>
            <el-table-column prop="geekerPhone" label="电话" width="110"></el-table-column>
            <el-table-column>
              <el-button type="danger" plain @click="open2">删除</el-button>
              <el-button type="primary" plain @click="downloadResume">下载简历</el-button>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-collapse-item title="创客" name="3">
          <el-table :data="allManagers[2]" stripe style="width: 100%">
            <el-table-column prop="geekerId" label="学号" width="100"></el-table-column>
            <el-table-column prop="geekerName" label="姓名" width="70"></el-table-column>
            <el-table-column prop="geekerDirection" label="方向" width="90"></el-table-column>
            <el-table-column prop="projectInfo" label="项目经历" width="270"></el-table-column>
            <el-table-column prop="geekerStation" label="职位" width="90"></el-table-column>
            <el-table-column prop="geekerPhone" label="电话" width="110"></el-table-column>
            <el-table-column>
              <el-button type="danger" plain @click="open3">删除</el-button>
              <el-button type="primary" plain @click="downloadResume">下载简历</el-button>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import config from '../../action/config.js';

export default {
  name:"ministerManagement",

  // async asyncData ({ $axios }) {
  //   let allManagers = await $axios.$get(config.api.get.Manager.allManagers);
  //   return {allManagers:allManagers.data}
  // },

  data() {
    return{
      activeName: '1',
      allManagers:[],
    };
  },
  
  methods:{
    downloadResume(){
      window.location.href="./wyb.docx"
    },
    getAllManagers() {
      // let token = sessionStorage.getItem('token');

      this.$axios.$get(config.api.get.Manager.allManagers,{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.allManagers = response.data;
      });
      console.log("刷新");
    },
    open1() {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.$post(config.api.post.Manager.deleteUsers,{userId:[this.allManagers[0][0].geekerId]},{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.deleteUsers = response.data;
          if(response.code == 0){
            this.getAllManagers();
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    open2() {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.$post(config.api.post.Manager.deleteUsers,{userId:[this.allManagers[1][0].geekerId]},{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.deleteUsers = response.data;
          if(response.code == 0){
            this.getAllManagers();
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    open3() {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.$post(config.api.post.Manager.deleteUsers,{userId:[this.allManagers[2][0].geekerId]},{headers:{ORDER_ACCESS_TOKEN:localStorage.getItem('token')}})
        .then((response)=>{
          this.deleteUsers = response.data;
          if(response.code == 0){
            this.getAllManagers();
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
  mounted(){
    this.getAllManagers();
  }
}
</script>
<style>
  .right-title{
    height: 60px;
    width: 100%;
    background-color: #4880d3;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 2px 2px 2px #3a3939b3;
  }
  .right-title span{
    font-size:20px;
    line-height: 60px;
    font-weight: 450;
    color:#fff;
    margin-left: 4%;
  }
  .right-content{
    width: 90%;
    height: 550px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .el-collapse{
    border-radius: 10px;
    box-shadow: 2px 2px 2px #0000004d;
  }
  /* 标题 */
  .el-collapse-item__header{
    background-color: #f8f0e5;
    padding-left: 4%;
    font-size: 15px;
  }
  .el-collapse-item__content{
    padding-bottom: 6px;
  }
  /* 列表标题 */
  .cell{
    text-align: center;
  }
  .el-button{
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    padding: 0;
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td{
    background-color: #f8f0e563;
  }
  .el-button--danger{
    width: 41px !important;
  }
  .el-button--primary{
    width: 62px !important;
  }
  .el-button+.el-button{
    margin-left: 5px !important;
  }
</style>